<template>
  <div class="content flex">
    <!-- 左侧固定导航 -->
    <StudentMenu />

    <!-- 右侧内容区 -->
    <main class="ml-64 flex-1 p-6 bg-gray-50 min-h-screen flex">
      <!-- 主体分两列：左侧分类菜单 + 列表，右侧预览 -->
      <div class="flex-none w-48 mr-6">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator=">">
          <el-breadcrumb-item>网站首页</el-breadcrumb-item>
          <el-breadcrumb-item>文章分类</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 竖向分类导航 -->
        <el-menu
            class="mt-4"
            mode="vertical"
            :default-active="currentCategory"
            background-color="#ffffff"
            text-color="#606266"
            active-text-color="#409EFF"
            @select="onCategoryChange"
        >
          <el-menu-item index="就业常识">就业常识</el-menu-item>
          <el-menu-item index="求职技能">求职技能</el-menu-item>
          <el-menu-item index="基层就业">基层就业</el-menu-item>
          <el-menu-item index="生涯规划">生涯规划</el-menu-item>
          <el-menu-item index="政策法规">政策法规</el-menu-item>
          <el-menu-item index="考研规培">考研规培</el-menu-item>
          <el-menu-item index="学生调查问卷">学生调查问卷</el-menu-item>
        </el-menu>

        <!-- 搜索框 -->
        <div class="my-4">
          <el-input
              v-model="searchTitle"
              placeholder="请输入文章标题"
              clearable
              @clear="onSearch"
          />
          <el-button
              type="primary"
              icon="el-icon-search"
              class="ml-2"
              @click="onSearch"
          >
            搜索
          </el-button>
        </div>

        <!-- 文章列表 -->
        <el-table
            :data="pagedArticles"
            @row-click="onRowClick"
            :row-class-name="rowClassName"
            highlight-current-row
            border
            style="width: 100%"
        >
          <el-table-column prop="title" label="文章标题" />
          <el-table-column prop="date" label="发布时间" width="140" />
        </el-table>

        <!-- 分页 -->
        <div class="mt-4 text-center">
          <el-pagination
              layout="prev, pager, next"
              :total="total"
              :page-size="pageSize"
              :current-page.sync="currentPage"
              @current-change="onPageChange"
              small
          />
        </div>
      </div>

      <!-- 右侧：文章内容预览 -->
      <div class="flex-1">
        <el-card>
          <el-skeleton :loading="loading" rows="10" animated>
            <template #template>
              <el-skeleton-item variant="text" style="width: 60%" />
              <el-skeleton-item variant="text" style="width: 40%" />
              <el-skeleton-item variant="paragraph" />
            </template>
            <template #default>
              <div v-if="selectedArticle">
                <h2>{{ selectedArticle.title }}</h2>
                <p class="text-gray-500 mb-4">{{ selectedArticle.date }}</p>
                <div v-html="selectedArticle.content" class="article-content" />
              </div>
              <div v-else class="text-center text-gray-400">
                暂无文章可预览
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </div>
    </main>
  </div>
</template>

<script>
import StudentMenu from "@/components/student/Student_menu.vue";

export default {
  name: "StudentInfo",
  components: { StudentMenu },
  data() {
    return {
      currentCategory: "就业常识",
      searchTitle: "",
      articles: [
        {
          id: 1,
          category: "就业常识",
          title: "湖南分布2024高校毕业生就业攻坚方案",
          date: "2024-03-28",
          content: `<p>今年湖南省将组织各大高校与企业联合举办大学生就业指导服务...</p>`
        },
        {
          id: 2,
          category: "求职技能",
          title: "简历模板如何写才更出彩？",
          date: "2024-04-01",
          content: `<p>一份优秀的简历要突出个人亮点，包括教育背景、项目经验...</p>`
        },
        {
          id: 3,
          category: "基层就业",
          title: "基层就业政策解读与案例分享",
          date: "2023-12-15",
          content: `<p>国家对基层三支一扶、大学生村官有专项补贴与生活补助...</p>`
        },
        // …（继续补充其他分类的模拟数据）
      ],
      currentPage: 1,
      pageSize: 5,
      selectedArticle: null,
      loading: false,
    };
  },
  computed: {
    total() {
      return this.articles
          .filter(a => a.category === this.currentCategory)
          .filter(a => a.title.includes(this.searchTitle)).length;
    },
    pagedArticles() {
      const filtered = this.articles
          .filter(a => a.category === this.currentCategory)
          .filter(a => a.title.includes(this.searchTitle));
      const start = (this.currentPage - 1) * this.pageSize;
      return filtered.slice(start, start + this.pageSize);
    },
  },
  methods: {
    onCategoryChange(cat) {
      this.currentCategory = cat;
      this.currentPage = 1;
      this.loadSelected();
    },
    onSearch() {
      this.currentPage = 1;
      this.loadSelected();
    },
    onRowClick(row) {
      this.loading = true;
      setTimeout(() => {
        this.selectedArticle = row;
        this.loading = false;
      }, 200);
    },
    onPageChange(page) {
      this.currentPage = page;
      this.loadSelected();
    },
    loadSelected() {
      this.loading = true;
      setTimeout(() => {
        this.selectedArticle = this.pagedArticles[0] || null;
        this.loading = false;
      }, 200);
    },
    rowClassName({row}) {
      return this.selectedArticle && row.id === this.selectedArticle.id
          ? "current-row"
          : "";
    },
  },
  mounted() {
    this.loadSelected();
  },
};
</script>

<style scoped>
.content {
  display: flex;
}

.current-row {
  background-color: #f0f9eb !important;
}

.article-content {
  line-height: 1.8;
}
</style>
